// components/CategoryRolling/CategoryRolling.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 左侧菜单数据
    leftMenuList: {
      // 类型
      type: Array,
      // 默认值
      value: []
    },
    // 右侧菜单数据(包含所有的右侧待展示数据)
    //!想要在方法中使用传入的参数，需要用【 this.data.rightMenuList】 来调用获取，但是不用在data中再声明一次
    rightMenuList: {
      type: Array,
      value: []
    }
  },
  /**
   * 监听传入的参数的变化，每次传入的数据变化变化，都会触发一次
   * ?注意：监听有点延时，所以第一下监听到的数据可能【为空】，然后拿到数据后再次触发就正常了
   *  */
  observers: {
    'rightMenuList': function (val) {
      // val=》就是父组件传入组件中的rightMenuList数据
      console.log(val);
      //!监听传入的右侧菜单数据，赋值给右侧数据变量，用于默认展示页面第一次打开时加载的右侧数据
      this.setData({
        // TODO:不同数据源，就要改一下这里的格式，比如叫childrens
        rightContent: val[0].children
      })
      // console.log(this.data.rightContent);
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    // 默认 当前选中的index，用于判断是否添加激活的样式名
    nowActiveCurrentIndex: 0,
    // 默认 右侧内容的滚动条距离顶部的距离
    scrollTopWhere: 0,
    // 右侧的商品数据，当前选择的左侧菜单对应的右侧数据
    rightContent: [],
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 左侧菜单的点击事件
    leftHandleItemTap (e) {
      /* 
      1 获取被点击的标题身上的索引
      2 给data中的nowActiveCurrentIndex赋值就可以了
      3 根据不同的索引来渲染右侧的商品内容
       */
      const { index } = e.currentTarget.dataset;
      console.log('当前点击的元素在数组的位置==》', index);
      // 设置右侧的商品数据，根据设置数组中不同位置的数据 this.rightMenuList[index] 就能有不同的数据了
      // TODO:不同数据源，就要改一下这里的格式，比如叫childrens
      let rightContent = this.data.rightMenuList[index].children;
      // 点击左侧菜单后，现在右侧对应要展示的数据
      // console.log(rightContent);
      this.setData({
        // 设置data中选中项index为传进来的index，用于wxml页面匹配并对应添加active样式
        nowActiveCurrentIndex: index,
        // 重新设置data中商品的数据，以展示不同的右侧商品内容
        rightContent,
        // 重新设置 右侧内容的scroll-view标签的距离顶部的距离
        scrollTopWhere: 0,
      });
    },
  },
  // ready: function () {
  //   console.log('组件加载完');
  //   console.log(this.data.rightMenuList);
  //   this.setData({
  //     rightContent: this.data.rightMenuList[0].children
  //   })
  // },
})
